<template>
	<view class="product-info">
		<block v-if="show">
			<u-top-tips ref="uTips" :navbar-height="0" :duration="5000"></u-top-tips>
			<movable-area class="go-home">
				<movable-view direction="all" class="go-square" :class="{isMerchatIcon: isMerchant}">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2021-05-08/20210508/27902ed18e4eced3bdc87f598e58bbc2.png" @click="goSquare"></image>
				</movable-view>
				<movable-view direction="all" class="go-home-img">
					<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/home.png" @click="goHome"></image>
				</movable-view>
			</movable-area>
			<view class="product-info-swiper" :style="{marginTop: '-' + top + 'px'}">
				<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" @change="swiperChange" :style="{height: swiperHeight + 'px'}" indicator-color="rgba(230,230,230,1)" indicator-active-color="#141414">
					<swiper-item v-for="(data,index) in productInfo.goodsImgList" :key="index">
						<image
							:lazy-load="true" 
							:src="data.url_" 
							mode="widthFix" 
							:class="'slide-image slide-image-' + (index+1)" 
							@click="preview('banner',data.url_)" 
							@load="imgLoad($event,index)">
						</image>
					</swiper-item>
				</swiper>
			</view>
			<view class="product-info-txt">
				<view class="product-info-price">￥<text>{{(productInfo.cost_ * 2.5).toFixed(0)}}</text></view>
				<view class="product-info-title">{{productInfo.name_}}</view>
				<view class="product-info-tags" style="justify-content: center;">
					<view class="product-info-tags-item" @click="poster" style="width: 300rpx; flex: none;">
						<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon3.png"></image>
						<text>海报分享</text>
					</view>
				</view>
			</view>
			<view class="product-info-card">
				<view class="Guarantee">
					<view class="Guarantee-line"><text class="name">服务</text><text v-if="serviceList.length > 1">{{serviceList[1].name_}}</text></view>
					<view class="Guarantee-line"><text class="name">保障</text><text v-if="serviceList.length">{{serviceList[0].name_}}</text></view>
				</view>
				<view class="Attributes" @click="showSku('addCar')">
					<view class="Attributes-line">
						<text class="name">选择规格</text>
						<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon4.png"></image>
					</view>
					<view class="Attributes-line">
						<text>{{selectedArr[0]?selectedArr.join('、'):'颜色、尺寸、大小...'}}</text>
					</view>
				</view>
			</view>
			<view class="product-parameters">
				<view class="product-info-tit-box">
					<view class="product-info-tit">商品信息</view>
				</view>
				<block>
					<block v-if="productInfo.propertyList">
						<view :class="['product-parameters-list',{more: displayMore}]">
							<view class="product-parameters-cell" v-for="(data,index) in productInfo.propertyList" :key="index">
								<text>{{data.name_}}</text>
								<text @click="showTips(data.value_,data.name_)">{{data.value_}}</text>
							</view>
						</view>
						<view :class="['displayMore',{more: displayMore}]" @click="displayMore=!displayMore" v-if="productInfo.propertyList.length > 5">
							{{displayMore?'收起':'展示更多'}}
							<u-icon name="arrow-down" class="arrow"></u-icon>
						</view>
					</block>
					<block v-else>
						<pt-nothing text="没有商品信息" bgColor="#FFF"></pt-nothing>
					</block>
				</block>
			</view>
			<view class="product-detail">
				<image 
					:lazy-load="true" 
					:src="data" 
					v-for="(data,index) in JSON.parse(productInfo.introduce_)" 
					:key="index" 
					@click="preview('detail',data)" 
					mode="widthFix">
				</image>
			</view>
			<view class="fun-bar">
				<view class="fun-bar-left">
					<view class="fun-item">
						<button open-type="share" @click="share">
							<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon5.png"></image>
							<text>分享</text>
						</button>
					</view>
					<view class="fun-item" @click="showServe">
						<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon6.png"></image>
						<text>客服</text>
					</view>
					<view class="fun-item" @click="goCar">
						<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/icon7.png"></image>
						<text>购物车</text>
					</view>
				</view>
				<view class="fun-bar-right">
					<view class="add-car" @click="showSku('addCar')">加入购物车</view>
					<view class="buy" @click="showSku('buy')">立即购买</view>
				</view>
			</view>
			
			<!--看了又看-->
			<view class="recommend" v-if="showRecommend">
				<view class="recommend-tit">看了又看</view>
				<view class="recommend-list">
					<pt-product-items 
						:showSort="false" 
						:object="{goods_list: recommendProList}" 
						@click="goProInfo" 
						:noMore="true"
						:isLogin="isLogin">
					</pt-product-items>
				</view>
				<pt-nothing
					text="暂无推荐商品"
					bgColor="#FFF"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
					v-if="!recommendProList.length">
				</pt-nothing>
				<view class="more-pro" v-if="recommendPage==3 && recommendProList.length">
					<pt-jump-more text="查看更多" @more="goSearchResult"></pt-jump-more>
				</view>
			</view>
			<!--看了又看-->
			
			<!-- sku -->
			<uni-popup type="bottom" ref="sku" class="sku-pop">
				<pt-sku
					:stock="productInfo.enable_stock_"
					:isLight="true"
					:skuInfo="skuInfo"
					@closeSku="closeSku"
					:actionType="actionType"
					@confirmAction="confirmAction(arguments)"
					:skuList="skuList"
					:selectedArr="selectedArr"
					:subIndex="subIndex"
					:isMerchant="isMerchant"
					:shopItemInfo="shopItemInfo"
					:isSale="productInfo.is_sale"
					:isLightSouece="serviceList.length?serviceList[1].name_:''">
				</pt-sku>
			</uni-popup>
			<!-- sku -->
			<!-- 客服 -->
			<uni-popup type="center" ref="server">
				<pt-server></pt-server>
			</uni-popup>
			<!-- 客服 -->
			<!-- app 分享 -->
			<u-action-sheet
				:list="appShareList"
				v-model="showShareList"
				@click="appShare"
				:tips="{text: '分享到'}"
				:cancel-btn="true"
				border-radius="10">
			</u-action-sheet>
			<!-- app 分享 -->
			<!-- 海报 -->
			<uni-popup :type="popupType" ref="poster" @change="posterFun" class="posterPopup">
				<view class="poster" v-if="showCanvas">
					<!-- #ifdef H5 -->
					<!-- <canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas> -->
					<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
					<image :src="H5PosterUrl" style="width: 600rpx; height: 900rpx;" v-if="H5PosterUrl"></image>
					<view class="save">请长按图片保存</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
					<view class="save" @click="savePoster">保存到相册</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="appPoster">
						<view class="close" @click="closePoster"><u-icon name="close" size="40" color="#FFF"></u-icon></view>
						<canvas id="poster" class="poster-canvas" canvas-id="poster" style="width: 600rpx; height: 900rpx;"></canvas>
					</view>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<view class="poster-share-btns">
						<view class="poster-share-btn" @click="sharePostToFriend(1)">
							<u-icon name="weixin-circle-fill" size="80" color="#31cc76"></u-icon>
							<view class="text">微信好友</view>
						</view>
						<view class="poster-share-btn" @click="sharePostToFriend(2)">
							<u-icon name="moments-circel-fill" size="80" color="#f59359"></u-icon>
							<view class="text">朋友圈</view>
						</view>
						<view class="poster-share-btn" @click="savePoster">
							<view class="poster-share-btn-image">
								<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/save.png" mode="aspectFit"></image>
							</view>
							<view class="text">保存图片</view>
						</view>
					</view>
					<!-- #endif -->
				</view>
			</uni-popup>
			<!-- 海报 -->
			
			<uni-popup type="bottom" ref="squarePop">
				<pt-square-pop @close="$refs.squarePop.close()" :goodsId="goods_id" :goodsType="5" ref="pt-square-pop"></pt-square-pop>
			</uni-popup>
			
		</block>
		<pt-loading></pt-loading>
	</view>
</template>

<script>
	import FormData from '@/api/http.interceptor.js'
	export default {
		data() {
			return {
				showRecommend: false,
				show: false,
				title: '',
				isCollect: false,
				userInfo: '',
				goods_id: '',
				top: '',
				background: {
					backgroundColor: 'rgba(255,255,255,0)',
				},
				swiperHeight: 400,
				productInfo: '',
				commentIndex: 0,
				QAIndex: 0,
				askCounts: 0,
				QATabs: [],
				QAlist: [],
				seriesCount: 0,
				seriesList: [],
				displayMore: false,
				productParameters: [],
				skuInfo: {
					img: '',
					number: 1,
					price: ''
				},
				sku: [],
				subIndex: [],
				selectedArr: [],
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				skuAllList: [],
				skuList: [],
				actionType: '',
				minsNumber: 1 ,// 最低起售件数
				// 分享
				showShareList: false,
				appShareList: [{
					text: '分享给微信朋友'
				},{
					text: '分享到微信朋友圈'
				},{
					text: '添加到微信收藏'
				}],
				// canvas
				QRcode: '',
				// 图片上传地址
				action: `${this.$domain}/api/Upimg/UpImg`,
				formData: FormData.sign(),
				realShot: [],
				// 是否为商家商品
				isMerchant: false,
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				// 推荐商品参数
				recommendPage: 0,
				recommendProList: [],
				showCanvas: false,
				popupType: 'center',
				video: '',
				serviceList: [],
				H5PosterUrl: '',
				isLogin: false
			};
		},
		onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')):''
			if(options.parent_id){
				uni.setStorageSync('parent_id',options.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: options.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
			}
			// 通过场景二维码进入的商品详情
			let scene
			if(options.scene){
				scene = decodeURIComponent(options.scene)
				this.parent_id = this.filterUrlParam(scene).parent_id || this.filterUrlParam(scene).pid
				uni.setStorageSync('newurl','/pages/light/light-product-info?goods_id='+this.filterUrlParam(scene).gid+'&parent_id='+this.filterUrlParam(scene).pid+'&isMerchant=true')
				uni.setStorageSync('parent_id',this.parent_id)
				// 如果用户从分享的小程序卡片点击进来的,设置一个url缓存,登录后返回当前缓存url
				let pages = getCurrentPages();
				let curPage = pages[pages.length - 1];
				uni.setStorageSync('newurl',curPage.$page.fullPath)
				this.$u.api.binding_refer({id: this.parent_id}).catch(() => {
					console.log('接口报错：绑定失败')
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '绑定失败'
					// })
				})
				if(this.filterUrlParam(scene).M){
					this.isMerchant = true
				}
				this.goods_id = this.filterUrlParam(scene).gid
			}else{
				this.goods_id = options.goods_id
			}
			if(options.isMerchant){
				this.isMerchant = true
			}
		},
		onShow() {
			if(uni.getStorageSync('userInfo')){
				this.isLogin = true
			}else{
				this.isLogin = false
			}
			this.init()
			if(this.$refs.squarePop){
				this.$refs['pt-square-pop'].init()
			}
		},
		methods: {
			// 解析小程序scene参数
			filterUrlParam(urlSearch){
			  let ret = {}
			  let regParam = /([^&=]+)=([\w\W]*?)(&|$|#)/g
			  if (urlSearch) {
			    var strParam = urlSearch;
			    var result
			    while ((result = regParam.exec(strParam)) != null) {
			      ret[result[1]] = result[2]
			    }
			  }
			  return ret
			},
			init(){
				this.$u.get('https://www.deng51.com/api/v1/buyer/goods/noDecode/getTypeGoodsById/'+this.goods_id).then(res => {
					this.show = true
					this.productInfo = res.data
					let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
					let store_name = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_name:'深哥家居'
					this.$u.mpShare = {
						title: '【'+ store_name +'】'+this.productInfo.name_,
						path: '/pages/light/light-product-info?goods_id='+ this.goods_id +'&isMerchant=true&parent_id=' + user_id,
						imageUrl: this.productInfo.main_img_
					}
					this.sku = this.productInfo.productList
					this.getSku()
					let priceArr = [],
							priceInterval = 0
					this.sku.forEach(item => {
						priceArr.push((item.cost_ * 2.5).toFixed(0))
					})
					if(Math.min.apply(null, priceArr)==Math.max.apply(null, priceArr)){
						priceInterval = Math.min.apply(null, priceArr)
					}else{
						priceInterval = Math.min.apply(null, priceArr) + '~' + Math.max.apply(null, priceArr)
					}
					this.skuInfo = {
						img: this.productInfo.main_img_,
						number: 1,
						price: priceInterval
					}
					if(this.productInfo.putaway_==0){
						this.productInfo.is_sale = 2
						uni.showToast({
							icon: 'none',
							title: '此商品已下架'
						})
					}
				}).then(() => {
					this.$u.get('https://www.deng51.com/api/v1/buyer/goods/noDecode/getGoodsServiceNote',{goodsId: this.goods_id}).then(res => {
						this.serviceList = res.data
					})
				})
			},
			imgLoad(e){
				this.swiperHeight = Math.floor(750*uni.getSystemInfoSync().windowWidth/750*e.detail.height/e.detail.width)
			},
			getSku(){
				if(this.isMerchant){
					this.skuList = []
					let formatList = this.getKeyValue(this.sku, 'format_')
					let codeList = this.getKeyValue(this.sku, 'code_')
					if(formatList.length>1){
						formatList.forEach((item,index) => {
							codeList.forEach((data,i) => {
								if(index==i){
									this.$set(item,'name',item.name + '/' + data.name)
								}
							})
						})
					}else{
						formatList.forEach((item,index) => {
							codeList.forEach((data,i) => {
								if(index==i){
									this.$set(item,'name',item.name)
								}
							})
						})
					}
					this.skuList.push({
						name: '规格',
						list: formatList
					})
					this.sku.forEach(item => {
						this.skuAllList.push({
							format_: item.format_,
							sku_id: item.id_,
							sku_sn: item.code_,
							img: item.img_,
							retail_price: (item.cost_ * 2.5).toFixed(0),
							self_price: item.cost_,
							enable_stock_: item.enable_stock_,
							light_type_: item.light_type_,
							power_: item.power_
						})
					})
				}
				let shopItemInfo = {}
				let arr = this.getKeyValue(this.skuAllList, 'format_')
				let length = this.unique(arr.map(obj => {
					return {
						id: obj.id,
						name: obj['name'],
						price: obj.price,
						img: obj.img
					}
				}))
				// if(length.length==1){
				// 	for (var i in this.skuAllList) {
				// 		//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
				// 		this.$set(shopItemInfo,this.skuAllList[i].format_,this.skuAllList[i])
				// 	}
				// }else{
				// 	console.log('aaaa')
				// 	for (var i in this.skuAllList) {
				// 		//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
				// 		this.$set(shopItemInfo,this.skuAllList[i].format_ + "/" + this.skuAllList[i].sku_sn,this.skuAllList[i])
				// 	}
				// }
				for (var i in this.skuAllList) {
					//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
					this.$set(shopItemInfo,this.skuAllList[i].format_ + "/" + this.skuAllList[i].sku_sn,this.skuAllList[i])
				}
				this.shopItemInfo = JSON.stringify(shopItemInfo)
				// 重组sku选择列表
			},
			swiperChange(e){
				let query = uni.createSelectorQuery().in(this),
						class_name = '.slide-image-' + e.detail.current
				query.select(class_name).boundingClientRect(res => {
					if(res){
						this.swiperHeight = res.height
					}
				}).exec();
			},
			commentChange(e){
				this.commentIndex = e.detail.current
			},
			moreComment(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/comment-list/comment-list?goods_id='+this.goods_id
				})
			},
			morePictures() {
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/product-info/shot-imgs/shot-imgs?goods_id='+this.goods_id
				})
			},
			changeQATab(e){
				this.QAIndex = e
			},
			// 图片预览
			preview(type,current){
				let urls = []
				switch (type){
					case 'banner':
						if(this.productInfo.goodsImgList.length){
							this.productInfo.goodsImgList.forEach(item => {
								urls.push(item.url_)
							})
						}
						break;
					case 'pictures':
						urls = this.productInfo.shot_info
						break;
					case 'detail':
						urls = JSON.parse(this.productInfo.introduce_)
						break;
					case 'skuImg':
						urls.push(current)
				}
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			previewImage(current,urls){
				uni.previewImage({
					current: current,
					urls: urls.split(',')
				})
			},
			moreSeries(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/brand-list/brand-info/brand-info?type=1&factory_id=' + this.productInfo.factory_id
				})
			},
			moreSeriesSearch(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result?style_id='+this.productInfo.style_id + '&class_id='+this.productInfo.class_id
				})
			},
			moreMerchantPro(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/merchant/store-pro/store-pro'
				})
			},
			seriesChange(e){
				if(this.seriesList.length < 3){
					this.seriesIndex = e.detail.current
				}else{
					this.seriesIndex = [e.detail.current,e.detail.current + 1]
				}
			},
			showSku(type){
				this.$refs.sku.open()
				this.actionType = type
			},
			closeSku(){
				this.$refs.sku.close()
			},
			// sku 方法
			// 获取字段值返回二位数组
			getKeyValue(arr, key) {
				let name = key
				let length = arr.map(obj => {
					return {
						id: obj.id,
						name: obj[name],
						price: obj.price,
						img: obj.img
					}
				})
				if(length.length<2){
					return arr.map(obj => {
						return {
							id: obj.sku_id,
							name: obj[name] + '/' + obj.code_,
							price: (obj.retail_price * 2.5).toFixed(0),
							img: obj.img
						}
					})
				}else{
					return arr.map(obj => {
						return {
							id: obj.sku_id,
							name: obj[name],
							price: (obj.retail_price * 2.5).toFixed(0),
							img: obj.img
						}
					})
				}
			},
			// 去重
			unique(arr) {
				let temp = {},
					result = [];
				arr.map((item, index) => {
					if (!temp[item.name]) {
						result.push(item);
						temp[item.name] = true
					}
				})
				return result
			},
			// 获取字段值返回value
			getKeyValueValue(arr, key) {
				let name = key
				return this.dedupe(arr.map(obj => {
					return obj[name]
				}))
			},
			// 一维数组去重
			dedupe(array) {
				return Array.from(new Set(array));
			},
			confirmAction(e){
				this.selectedArr = e[0]
				this.skuInfo = e[1]
				this.subIndex = e[2]
				this.actionType = e[3]
				let data = {
					// #ifdef MP-WEIXIN
					client: 1,
					// #endif
					// #ifdef APP-PLUS
					client: 2,
					// #endif
					// #ifdef H5
					client: 3,
					// #endif
					store_id: 1,
					type: 6,
					sku_id: this.skuInfo.sku_id,
					num: this.skuInfo.number,
					goods_id: this.goods_id,
					space_ids: 0,
					is_show: this.actionType==='addCar'?1:2,
					is_all: 1
				}
				switch (this.actionType){
					case 'addCar':
						this.$u.api.AddStoreGoodsCart(data).then(res => {
							uni.showToast({
								icon: 'none',
								title: '加入购物车成功'
							})
							this.$refs.sku.close()
							if(uni.getStorageSync('userInfo')){
								this.addFoot('加入购物车')
							}
						})
						break;
					case 'buy':
						this.$u.api.AddStoreGoodsCart(data).then(res => {
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/car/confirmOrder/confirmOrder?ids='+res.datas,
								success: (jump) => {
									this.$refs.sku.close()
									this.subIndex = []
									this.selectedArr = []
								}
							})
						})
						break;
				}
			},
			showServe(){
				this.$refs.server.open()
			},
			share(){
				// #ifdef H5
				let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
				let url = null
				if(this.isMerchant){
					url = 'https://master.jiaju01.com/web/shop/#/pages/light/light-product-info?goods_id='+this.goods_id + '&parent_id=' + user_id + '&isMerchant=true'
				}else{
					url = 'https://master.jiaju01.com/web/shop/#/pages/light/light-product-info?goods_id='+this.goods_id + '&parent_id=' + user_id
				}
				uni.setClipboardData({
					data: url,
					success: () => {
						uni.showToast({
							icon: 'none',
							title: '链接复制成功，赶紧发送给朋友吧~'
						})
					}
				})
				// #endif
				// #ifdef APP-PLUS
				this.showShareList = true
				// #endif
			},
			appShare(index){
				let user_id = uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).user_id:0
				let url = null
				if(this.isMerchant){
					url = '/pages/light/light-product-info?goods_id='+this.goods_id + '&parent_id=' + user_id + '&isMerchant=true'
				}else{
					url = '/pages/light/light-product-info?goods_id='+this.goods_id + '&parent_id=' + user_id
				}
				let weburl = null
				if(this.isMerchant){
					weburl = 'https://master.jiaju01.com/web/shop/#/pages/light/light-product-info?goods_id='+this.goods_id + '&parent_id=' + user_id + '&isMerchant=true'
				}else{
					weburl = 'https://master.jiaju01.com/web/shop/#/pages/light/light-product-info?goods_id='+this.goods_id + '&parent_id=' + user_id
				}
				if(index==0){
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 5,
						imageUrl: this.productInfo.image,
						title: this.productInfo.goods_name,
						miniProgram: {
							id: 'gh_acfd003d4328',
							path: url,
							type: 0,
							webUrl: ''
						},
						success: function (res) {
							// uni.showToast({
							// 	icon: 'none',
							// 	title: '分享成功'
							// })
						}
					});
				}else if(index==1){
					uni.share({
						provider: "weixin",
						scene: "WXSenceTimeline",
						type: 0,
						title: this.productInfo.goods_name,
						imageUrl: this.productInfo.image_thumb,
						href: weburl,
						success: function (res) {
							// uni.showToast({
							// 	icon: 'none',
							// 	title: '分享成功'
							// })
						}
					})
				}else if(index==2){
					uni.share({
						provider: 'weixin',
						scene: 'WXSceneFavorite',
						type: 0,
						title: this.productInfo.goods_name,
						imageUrl: this.productInfo.image_thumb,
						href: weburl,
						success: function (res) {
							// uni.showToast({
							// 	icon: 'none',
							// 	title: '收藏成功'
							// })
						}
					})
				}
			},
			// canvas
			poster(){
				this.$refs.poster.open()
				this.$nextTick(() => {
					if(uni.getStorageSync('userInfo')){
						this.$u.api.app_other_goods_qr({goods_id: this.goods_id}).then(res => {
							this.QRcode = res.datas
						}).then(() => {
							this.OnCanvas()
							// #ifdef H5
							uni.showLoading({
								title: '请稍后···'
							})
							setTimeout(() => {
								this.$nextTick(() => {
									uni.canvasToTempFilePath({
									  canvasId: 'poster',
										success: (data) => {
											this.$u.api.UploadImgByBase({file: data.tempFilePath}).then(res => {
												uni.hideLoading()
												this.H5PosterUrl = res.datas
											})
										},
										fail: (fail) => {
											console.log(fail)
											uni.showToast({
												icon: 'none',
												title: '海报生成失败，请重试'
											})
										}
									})
								})
							},1000)
							// #endif
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '请先登录'
						})
						setTimeout(() => {
							// #ifdef APP-PLUS
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/login/app-login'
							})
							// #endif
							// #ifdef MP-WEIXIN
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/login/login'
							})
							// #endif
						},1500)
					}
				})
			},
			async OnCanvas() {
				let _this = this;
				_this.ctx = uni.createCanvasContext('poster',this);
				const systemInfo = uni.getSystemInfoSync()
				const proImgInfo = await _this.getImageInfo({ imgSrc: _this.productInfo.main_img_ }); // 商品图
				// const avatarImgInfo = await _this.getImageInfo({ imgSrc: JSON.parse(uni.getStorageSync('userInfo')).heard_img }); // 头像
				const QRcodeImgInfo = await _this.getImageInfo({ imgSrc: _this.QRcode }); // 二维码
				let vice_middle1 = '',
							vice_middle2 = ''
				if(_this.productInfo.goodsImgList.length >= 2){
					vice_middle1 = await _this.getImageInfo({ imgSrc: _this.productInfo.goodsImgList[0].url_ }); // 附图一
					vice_middle2 = await _this.getImageInfo({ imgSrc: _this.productInfo.goodsImgList[1].url_ }); // 附图二
				}
				_this.canvasW = uni.upx2px(600);
				_this.canvasH = uni.upx2px(900);
				
				_this.ctx.setFillStyle('#FFFFFF');
				_this.ctx.fillRect(0,0,_this.canvasW,_this.canvasH)
				
				// 绘制产品图
				_this.ctx.drawImage(proImgInfo.path, 0, 0, uni.upx2px(600), uni.upx2px(600));
				
				// 商品标题
				const goods_name = _this.productInfo.name_
				_this.ctx.setFillStyle('#141414');
				_this.ctx.font = 'normal bold 12px Microsoft YaHei';
				if(goods_name.length > 20){
					_this.ctx.fillText(goods_name.substring(0,20) + '...', uni.upx2px(30) , uni.upx2px(640));
				}else{
					_this.ctx.fillText(goods_name, uni.upx2px(30) , uni.upx2px(640));
				}
				
				// 商品副标题
				const biref = _this.productInfo.brand_name_
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.font = 'normal nomal 10px Microsoft YaHei';
				if(biref.length > 20){
					_this.ctx.fillText(biref.substring(0,20) + '...', uni.upx2px(30) , uni.upx2px(680));
				}else{
					_this.ctx.fillText(biref, uni.upx2px(30) , uni.upx2px(680));
				}
				
				// 商品价格符号
				const symbol = '￥'
				_this.ctx.setFillStyle('#F59359');
				_this.ctx.font = 'normal nomal 12px Microsoft YaHei';
				_this.ctx.fillText(symbol, uni.upx2px(30) , uni.upx2px(730));
				
				// 商品价格
				const price = (_this.productInfo.cost_ * 2.5).toFixed(0)
				_this.ctx.setFillStyle('#F59359');
				_this.ctx.font = 'normal nomal 16px Arial';
				_this.ctx.fillText(price, uni.upx2px(50) , uni.upx2px(730));
				
				// 如果附图有两张或两张以上就绘制附图否则绘制两张主图填充空白区域
				if(_this.productInfo.goodsImgList.length >= 2){
					// 绘制副图一
					_this.ctx.drawImage(vice_middle1.path, uni.upx2px(30), uni.upx2px(750), uni.upx2px(120), uni.upx2px(120));
					// 绘制副图二
					_this.ctx.drawImage(vice_middle2.path, uni.upx2px(170), uni.upx2px(750), uni.upx2px(120), uni.upx2px(120));
				}else{
					// 绘制主图
					_this.ctx.drawImage(proImgInfo.path, uni.upx2px(30), uni.upx2px(750), uni.upx2px(120), uni.upx2px(120));
					_this.ctx.drawImage(proImgInfo.path, uni.upx2px(170), uni.upx2px(750), uni.upx2px(120), uni.upx2px(120));
				}
				
				// 绘制二维码
				_this.ctx.drawImage(QRcodeImgInfo.path, uni.upx2px(400), uni.upx2px(660), uni.upx2px(170), uni.upx2px(170));
				
				// 绘制二维码提示
				const tips = '保存海报即可分享'
				_this.ctx.setFillStyle('#6B6B6B');
				_this.ctx.font = 'normal nomal 10px Microsoft YaHei';
				_this.ctx.fillText(tips, uni.upx2px(410) , uni.upx2px(860));
				
				//延迟后渲染至canvas上
				setTimeout(function() {
					_this.ctx.draw();
				}, 600);
			},
			
			async roundRectColor(context, x, y, w, h, r) {  //绘制圆角矩形（纯色填充）
			  context.save();
			  context.setFillStyle("#000");
			  context.setStrokeStyle('#000')
			  context.setLineJoin('round');  //交点设置成圆角
			  context.setLineWidth(r);
			  context.strokeRect(x + r/2, y + r/2, w - r , h - r );
			  context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
			  context.stroke();
			  context.closePath();
			},
			
			async getImageInfo({ imgSrc }) {
				uni.showLoading({
					title: '正在生成海报',
					mask: true
				})
				return new Promise((resolve, errs) => {
					if(imgSrc.indexOf('https')!=-1){
						uni.downloadFile({
							url: imgSrc,
							success:function(res){
								uni.getImageInfo({
									src: res.tempFilePath,
									success: function(image) {
										uni.hideLoading()
										resolve(image);
									},
									fail(err) {
										uni.hideLoading()
										uni.showToast({
											title: '生成失败，请退出重试',
											icon: 'none',
											duration: 1500
										})
										errs(err);
									}
								});
							}
						})
					}else{
						uni.getImageInfo({
							src: imgSrc,
							success: function(image) {
								uni.hideLoading()
								resolve(image);
							},
							fail(err) {
								uni.hideLoading()
								uni.showToast({
									title: '生成失败，请退出重试',
									icon: 'none',
									duration: 1500
								})
								errs(err);
							}
						});
					}
				});
			},
			savePoster(){
				let _this = this
				uni.showLoading({
					title: '正在保存',
					mask: true
				})
				uni.canvasToTempFilePath({
					width: uni.upx2px(600),
					height: uni.upx2px(900),
				  destWidth: 600,
				  destHeight: 900,
				  canvasId: 'poster',
				  success: function(data) {
						uni.hideLoading()
						// #ifdef APP-PLUS || H5
						uni.saveImageToPhotosAlbum({
							filePath: data.tempFilePath,
							success(saveRes) {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
							},
							fail(fail) {
								uni.hideLoading()
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.getSetting({
							withSubscriptions: true,
							success: (scope) => {
								if(!scope.authSetting['scope.writePhotosAlbum']){
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: () => {
											uni.saveImageToPhotosAlbum({
												filePath: data.tempFilePath,
												success(saveRes) {
													uni.showToast({
														icon: 'none',
														title: '保存成功，请在相册中查看',
														duration: 1500
													})
												},
												fail: () => {
													uni.showToast({
														icon: 'none',
														title: '保存失败，您已取消保存图片'
													})
												}
											})
										},
										fail: () => {
											// uni.showToast({
											// 	icon: 'none',
											// 	title: '您已关闭相册访问开关，请开启后重新保存'
											// })
											this.$refs.openSetting.init()
										}
									})
								}else{
									uni.saveImageToPhotosAlbum({
										filePath: data.tempFilePath,
										success(saveRes) {
											uni.showToast({
												icon: 'none',
												title: '保存成功，请在相册中查看',
												duration: 1500
											})
										},
										fail: () => {
											uni.showToast({
												icon: 'none',
												title: '保存失败，您已取消保存图片'
											})
										}
									})
								}
							}
						})
						// #endif
				  }
				})
			},
			goCar(){
				uni.switchTab({
					animationDuration: 500,
					url: '/pages/car/car'
				})
			},
			upLoadImg(){
				uni.chooseImage({
					count: 9,
					sizeType: ["original","compressed"],
					sourceType: ["album","camera"],
					success: (choseRes) => {
						let num = 0
						this.realShot = []
						choseRes.tempFilePaths.forEach(item => {
							uni.uploadFile({
								url: this.action,
								filePath: item,
								name: 'file',
								formData: this.formData,
								success: (imgUrl) => {
									num++
									this.realShot.push(JSON.parse(imgUrl.data).datas[0])
									if(num==choseRes.tempFilePaths.length){
										this.$u.api.UpGoodsShotImg({goods_id: this.goods_id,shot_img: this.realShot.join(',')}).then(res => {
											uni.showToast({
												icon: 'none',
												title: '上传成功',
												duration: 1500
											})
											setTimeout(() => {
												this.init()
											},1500)
										})
									}
								}
							})
						})
					}
				})
			},
			goProInfo(goods_id){
				getApp().goProInfo(goods_id,this.isMerchant)
			},
			UpCollect(){
				this.$u.api.UpCollect({status: this.productInfo.goods_type,goods_id: this.goods_id}).then(res => {
					this.isCollect = !this.isCollect
					if(res.datas==='取消收藏成功'){
						uni.showToast({
							icon: 'none',
							title: '您已取消收藏'
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
						if(uni.getStorageSync('userInfo')){
							this.addFoot('收藏商品')
						}
					}
				})
			},
			goAskList(){
				if(this.isMerchant){
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/ask-list/ask-list?goods_id='+this.goods_id + '&goods_type='+this.productInfo.goods_type + '&isMerchant=true'
					})
				}else{
					uni.navigateTo({
						animationDuration: 500,
						url: '/pages/product-info/ask-list/ask-list?goods_id='+this.goods_id + '&goods_type='+this.productInfo.goods_type
					})
				}
			},
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: this.addFootParam.stay_time,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			getRecommendPro(){
				this.$u.api.GoodsList({
					page: this.recommendPage,
					class_id: this.productInfo.class_id,
					style_id: this.productInfo.style_id?this.productInfo.style_id:''
				}).then(res => {
					this.showRecommend = true
					res.datas.forEach(item => {
						this.recommendProList.push(item)
					})
				})
			},
			getOtherGoods(){
				this.$u.api.SearchRecommendList({page: this.recommendPage,order_by: 'add_time'}).then(res => {
					this.showRecommend = true
					if(res.datas.data.length){
						if(res.datas.data.length < 10){
							this.recommendPage = 3
						}
						res.datas.data.forEach(item => {
							this.recommendProList.push(item)
						})
					}
				})
			},
			goSearchResult(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/pages/search/search-result?class_id='+this.productInfo.class_id
				})
			},
			posterFun(e){
				this.showCanvas = e.show
			},
			sharePostToFriend(type){
				uni.showLoading({
					mask: true,
					title: '正在生成分享··'
				})
				uni.canvasToTempFilePath({
				  destWidth: 600,
				  destHeight: 900,
				  canvasId: 'poster',
				  success: (data) => {
						switch (Number(type)){
							case 1:
								uni.share({
									provider: "weixin",
									scene: "WXSceneSession",
									type: 2,
									imageUrl: data.tempFilePath,
									success: () => {
										console.log('分享成功')
									}
								})
								break;
							case 2:
								uni.share({
									provider: "weixin",
									scene: "WXSenceTimeline",
									type: 2,
									imageUrl: data.tempFilePath,
									success: () => {
										console.log('分享成功')
									}
								})
								break;
						}
				  },
					complete: () => {
						uni.hideLoading()
					}
				})
			},
			// APP端关闭海报弹窗
			closePoster(){
				this.$refs.poster.close()
			},
			goHome(){
				// #ifdef MP-WEIXIN
				if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
					uni.switchTab({
						url: '/pages/merchant/merchant'
					})
				}else{
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
				// #endif
				// #ifdef APP-PLUS || H5
				uni.switchTab({
					url: '/pages/index/index'
				})
				// #endif
			},
			// 监听视频是否在播放
			timeupdate(e){
				this.isPlay = true
			},
			showTips(value,key) {
				if(!this.isMerchant){
					if(key==='产品编号'){
						this.$refs.uTips.show({
							title: value,
							type: 'custom'
						});
					}
					return
				}
				this.$refs.uTips.show({
					title: value,
					type: 'custom'
				});
			},
			goSquare(){
				this.$refs.squarePop.open()
			}
		},
		onReachBottom() {
			if(!this.isMerchant){
				if(this.recommendPage < 3){
					this.getRecommendPro()
					this.recommendPage++
				}
			}else{
				if(this.recommendPage < 3){
					this.getOtherGoods()
					this.recommendPage++
				}
			}
		},
		mounted() {
			this.addFootParam.start_time = parseInt(new Date().getTime() / 1000)
		},
		onUnload() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看灯饰')
			}
		},
		onHide() {
			this.addFootParam.end_time = parseInt(new Date().getTime() / 1000)
			this.addFootParam.stay_time = this.addFootParam.end_time - this.addFootParam.start_time
			if(uni.getStorageSync('userInfo')){
				this.addFoot('查看灯饰')
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F9F9F9;
		padding-bottom: 140rpx;
	}
	.product-info-swiper{
		position: relative;
		.hot{
			position: absolute;
			right: 40rpx;
			top: 30rpx;
			z-index: 10;
			background-color: #FFF;
			border: solid 2rpx #dbdbdb;
			border-radius: 6rpx;
			color: #858585;
			font-size: 20rpx;
			height: 50rpx;
			line-height: 46rpx;
			padding: 0 20rpx;
			image{
				position: absolute;
				width: 25rpx;
				height: 16rpx;
				right: 20rpx;
				bottom: -14rpx;
			}
		}
		video{
			width: 100%;
			height: 100%;
		}
		image{
			width: 100%;
		}
		/deep/ .uni-swiper-dot{
			width: 6rpx;
			height: 6rpx;
		}
		/deep/ .uni-swiper-dot-active{
			width: 8rpx;
			height: 8rpx;
		}
	}
	.product-info-txt{
		padding: 0 30rpx;
		padding-bottom: 60rpx;
		background-color: #FFF;
		.product-info-price{
			text-align: center;
			color: #F59359;
			padding: 70rpx 0;
			font-size: 28rpx;
			text{
				font-size: 42rpx;
			}
		}
		.product-info-title{
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			line-height: 60rpx;
		}
		.product-info-des{
			margin-top: 40rpx;
			font-size: 24rpx;
			color: #757575;
			text-align: center;
		}
		.product-info-tags{
			margin-top: 90rpx;
			display: flex;
			.product-info-tags-item{
				flex: 1;
				height: 88rpx;
				line-height: 88rpx;
				box-shadow: 2rpx 4rpx 20rpx 0px rgba(40,34,31,0.03);
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #6B6B6B;
				image{
					width: 38rpx;
					height: 38rpx;
					margin-right: 10rpx;
				}
			}
			.product-info-tags-item:nth-child(2){
				margin: 0 20rpx;
			}
		}
	}
	.product-info-card{
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		.Guarantee{
			margin-right: 20rpx;
		}
		.Guarantee,.Attributes{
			flex: 1;
			min-width: 0;
			background-color: #FFF;
			padding: 30rpx 20rpx;
			border-radius: 8rpx;
			.Guarantee-line{
				font-size: 24rpx;
				color: #6B6B6B;
				margin-bottom: 20rpx;
				.name{
					margin-right: 20rpx;
					color: #141414;
					font-weight: bold;
				}
				&:last-child{
					margin-bottom: 0;
				}
			}
			.Attributes-line{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				&:first-child{
					font-weight: bold;
					color: #141414;
					margin-bottom: 20rpx;
				}
				&:last-child{
					min-width: 0;
					color: #6B6B6B;
				}
				text{
					display: inline-block;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				image{
					width: 10rpx;
					height: 18rpx;
				}
			}
		}
	}
	.product-info-tit-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.product-info-tit{
			font-size: 32rpx;
			font-weight: bold;
			text{
				font-size: 24rpx;
				font-weight: normal;
			}
		}
		.product-info-indicator{
			height: 8rpx;
			line-height: 8rpx;
			display: flex;
			align-items: center;
			text{
				width: 6rpx;
				height: 6rpx;
				border-radius: 50%;
				background-color: #E6E6E6;
				margin-left: 15rpx;
				font-size: 0;
				vertical-align: middle;
				transition: all .5s;
				&.active{
					width: 8rpx;
					height: 8rpx;
					background-color: #141414;
				}
			}
			image{
				width: 50rpx;
				height: 50rpx;
			}
			.ask-btn{
				background-color: #141414;
				border-radius: 8rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				color: #FFF;
				padding: 0 10rpx;
				font-size: 24rpx;
				image{
					width: 20rpx;
					height: 20rpx;
					vertical-align: middle;
					margin: -4rpx 10rpx 0 0;
				}
			}
		}
	}
	.install-fee{
		background-color: #FFF;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		.install-fee-value{
			flex: 1;
			min-width: 0;
			color: #999;
		}
	}
	.product-info-comment{
		background-color: #FFF;
		padding: 40rpx 30rpx;
		.product-info-comment-tit{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.commentSwiper{
			margin: 50rpx -30rpx 50rpx 0;
			height: 250rpx;
			.commentItem{
				height: 250rpx;
				&:last-child .comment-box{
					margin-right: 0;
				}
				.comment-box{
					height: 250rpx;
					background-color: #F2F2F2;
					padding: 30rpx;
					margin-right: 30rpx;
					border-radius: 8rpx;
					.comment-user{
						display: flex;
						align-items: center;
						image{
							width: 66rpx;
							height: 66rpx;
							border-radius: 50%;
						}
						.comment-user-info{
							flex: 1;
							margin-left: 20rpx;
							.comment-user-name{
								font-size: 24rpx;
							}
							.comment-user-time{
								margin-top: 10rpx;
								font-size: 20rpx;
								color: #909090;
							}
						}
					}
					.comment-info{
						font-size: 26rpx;
						line-height: 46rpx;
						color: #141414;
						margin-top: 30rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
	.product-info-pictures{
		padding: 30rpx;
		background-color: #FFF;
		.product-info-pictures-list{
			margin: 50rpx -20rpx 50rpx 0;
			white-space: nowrap;
			image{
				width: 215rpx;
				height: 215rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0;
				}
			}
		}
	}
	.QA{
		padding: 30rpx;
		background-color: #FFF;
		.QA-tabs{
			margin: 20rpx -30rpx;
		}
		.QA-list{
			margin-bottom: 20rpx;
			.QA-item{
				background-color: #F2F2F2;
				padding: 20rpx;
				border: 2rpx solid rgba(242,242,242,1);
				border-radius: 8rpx;
				margin-bottom: 30rpx;
				.Q,.A{
					display: flex;
					view{
						flex: 1;
						min-width: 0;
						line-height: 46rpx;
					}
					.tag{
						width: 32rpx;
						height: 32rpx;
						text-align: center;
						line-height: 32rpx;
						font-size: 24rpx;
						color: #FFF;
						border-radius: 50%;
						margin-right: 20rpx;
						margin-top: 8rpx;
					}
				}
				.Q{
					margin-bottom: 20rpx;
					.tag{
						background-color: #141414;
					}
					view{
						font-weight: bold;
					}
				}
				.A{
					.tag{
						background-color: #A8A8A8;
					}
					view{
						color: #757575;
						font-size: 24rpx;
						white-space: pre-wrap;
					}
					.imgs{
						display: flex;
						image{
							width: 120rpx;
							height: 120rpx;
							border-radius: 8rpx;
							margin-right: 30rpx;
							margin-top: 10rpx;
							&:last-child{
								margin-right: 0;
							}
						}
					}
				}
			}
			&.col{
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				height: 580rpx;
				white-space: nowrap;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				.QA-item{
					display: inline-block;
					width: 600rpx;
					margin-right: 20rpx;
				}
			}
		}
	}
	.series-recommend{
		background-color: #FFF;
		padding: 30rpx;
		margin-top: 20rpx;
		.series-list{
			margin: 50rpx 0;
			.series-list-scroll-view{
				white-space: nowrap;
			}
			.seriesItem{
				display: inline-block;
				width: 215rpx;
				margin-right: 20rpx;
				image{
					width: 215rpx;
					height: 215rpx;
					border-radius: 8rpx;
				}
				.goods_name{
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 15rpx 0;
					padding-right: 20rpx;
				}
				.goods_price{
					text-align: center;
					padding-right: 40rpx;
					font-size: 24rpx;
					text{
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.product-parameters{
		padding: 30rpx;
		background-color: #FFF;
		.product-parameters-list{
			margin-top: 30rpx;
			max-height: calc(85rpx * 5);
			overflow: hidden;
			&.more{
				max-height: none;
			}
			.product-parameters-cell{
				height: 85rpx;
				line-height: 85rpx;
				display: flex;
				justify-content: space-between;
				text:first-child{
					color: #141414;
				}
				text:last-child{
					flex: 1;
					min-width: 0;
					color: #6B6B6B;
					white-space: nowrap;
					text-align: right;
					margin-left: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		.displayMore{
			text-align: center;
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #999794;
			.arrow{
				margin-left: 10rpx;
				transition: all .5s;
			}
			&.more{
				.arrow{
					transform: rotate(-180deg);
				}
			}
		}
	}
	.product-detail{
		margin-top: 20rpx;
		image{
			width: 100%;
		}
		&.Multiple{
			image{
				margin-top: 20rpx;
				&:first-child{
					margin-top: 0;
				}
			}
		}
	}
	.fun-bar{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background-color: #FFF;
		z-index: 2;
		display: flex;
		align-items: center;
		padding: 0 30rpx 0 0;
		border-top: solid 2rpx #EEE;
		.fun-bar-left{
			display: flex;
			align-items: center;
			flex: 1;
			justify-content: space-between;
			.fun-item{
				text-align: center;
				flex: 1;
				button{
					background-color: transparent;
					line-height: normal;
					padding: 0;
					font-size: 0;
					&::after{
						display: none;
					}
				}
				image{
					width: 38rpx;
					height: 38rpx;
				}
				text{
					display: block;
					margin-top: 5rpx;
					font-size: 20rpx;
				}
			}
		}
		.fun-bar-right{
			display: flex;
			margin-left: 30rpx;
			view{
				width: 190rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFF;
				&.add-car{
					background-color: #141414;
					border-radius: 8rpx 0 0 8rpx;
				}
				&.buy{
					background-color: #F59359;
					border-radius: 0 8rpx 8rpx 0;
				}
			}
		}
	}
	/* #ifdef APP-PLUS */
	.posterPopup .uni-transition{
		height: 100%;
	}
	/* #endif */
	.poster{
		width: 600rpx;
		background-color: #FFF;
		overflow: hidden;
		border-radius: 0 0 10rpx 10rpx;
		image{
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
		}
		/* #ifdef APP-PLUS */
		width: 100%;
		height: 100%;
		text-align: center;
		background-color: transparent;
		.appPoster{
			position: fixed;
			top: 0;
			bottom: 150rpx;
			left: 0;
			right: 0;
			.close{
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
		.poster-canvas{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			border-radius: 50%;
		}
		/* #endif */
		.save{
			margin: 40rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: rgba(20,20,20,1);
			border-radius: 8rpx;
			text-align: center;
			color: #FFF;
			font-size: 32rpx;
			font-weight: bold;
		}
		.poster-share-btns{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			background-color: #FFF;
			border-radius: 10rpx 10rpx 0 0;
			height: 150rpx;
			.poster-share-btn{
				flex: 1;
				.text{
					font-size: 24rpx;
					margin-top: 10rpx;
				}
				.poster-share-btn-image{
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					image{
						width: 80rpx;
						height: 80rpx;
					}
				}
			}
		}
	}
	.recommend{
		margin-top: 40rpx;
		background-color: #FFF;
		padding-bottom: 30rpx;
		.recommend-tit{
			text-align: center;
			padding-top: 60rpx;
			padding-bottom: 40rpx;
			font-size: 32rpx;
			font-weight: bold;
			&::before,&::after{
				display: inline-block;
				vertical-align: middle;
				content: '';
				height: 1rpx;
				width: 200rpx;
				background-color: #EEE;
			}
			&::before{
				margin-right: 30rpx;
			}
			&::after{
				margin-left: 30rpx;
			}
		}
		.recommend-list{
			padding: 0 30rpx;
		}
		.more-pro{
			padding: 50rpx 0 30rpx;
		}
	}
	
	.go-home{
		position: fixed !important;
		left: 0;
		top: 10rpx;
		bottom: 130rpx;
		left: 5px;
		right: 5px;
		pointer-events: none;
		z-index: 20;
		width: auto;
		height: auto;
		.go-home-img,.go-square{
			position: absolute !important;
			width: 80rpx;
			height: 80rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 25rpx;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			image{
				width: 80rpx;
				height: 80rpx;
			}
		}
		.go-square{
			margin-bottom: 170rpx;
			width: 130rpx;
			height: 141rpx;
			right: 0;
			&.isMerchatIcon{
				margin-bottom: 90rpx;
			}
			image{
				width: 130rpx;
				height: 141rpx;
			}
		}
	}
	
</style>